<template>
	<el-form :model="state.formData" ref="vForm" :rules="state.rules" label-position="top" label-width="50px"
		size="default">
		<div class="static-content-item">
			<div>供应商信息</div>
		</div>
		<el-row :gutter="20">
			<el-col :span="12" class="grid-cell">
				<el-form-item label="供应商分级" prop="supplier_level">
					<el-select @clear="selectClear('supplier_level')"
						@change="(value:any)=>selectChange(value,'supplier_level')"
						v-model="state.formData.supplier_level" multiple class="full-width-input" ref="supplier_level" clearable>
						<el-option v-for="(item, index) in state.supplier_levelOptions" :key="index" :label="item.label"
							:value="item">
							<!--  -->
							<el-tag style="border: 0;" :color="item?.color" round effect="dark">
								{{ item.label }}
							</el-tag>
							<!--  -->
						</el-option>
						<!--  -->
						<template #tag>
							<el-tag style="border: 0;" v-for="(item,key) in state.formData.supplier_level" :key="key"
								:color="item?.color" round effect="dark">
								{{ item.label }}
							</el-tag>
						</template>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12" class="grid-cell">
				<el-form-item label="合作状态" prop="cooperation_status" class="required">
					<el-select @clear="selectClear('cooperation_status')"
						@change="(value:any)=>selectChange(value,'cooperation_status')"
						v-model="state.formData.cooperation_status" multiple class="full-width-input" ref="cooperation_status" clearable>
						<el-option v-for="(item, index) in state.cooperation_statusOptions" :key="index"
							:label="item.label" :value="item">
							<!--  -->
							<el-tag style="border: 0;" :color="item?.color" round effect="dark">
								{{ item.label }}
							</el-tag>
							<!--  -->
						</el-option>
						<!--  -->
						<template #tag>
							<el-tag style="border: 0;" v-for="(item,key) in state.formData.cooperation_status"
								:key="key" :color="item?.color" round effect="dark">
								{{ item.label }}
							</el-tag>
						</template>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-form-item label="供应商简称" prop="supplier_short_name" class="required">
			<el-input v-model="state.formData.supplier_short_name" type="text" clearable></el-input>
		</el-form-item>
		<el-row :gutter="20">
			<el-col :span="12" class="grid-cell">
				<el-form-item label="联系人" class="form-item-bg" prop="contact_person">
					<el-input v-model="state.formData.contact_person" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12" class="grid-cell">
				<el-form-item label="手机号" class="form-item-bg" prop="phone_number">
					<el-input v-model="state.formData.phone_number" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<div class="static-content-item">
			<div>结算信息</div>
		</div>
		<el-row :gutter="20">
			<el-col :span="segmentedIndex===1?6:24" class="grid-cell">
				<el-form-item label="结算方式" prop="settlement_method">
					<el-input v-model="state.formData.settlement_method" readonly type="text" clearable>
						<template #prefix>
							<div>
								<el-check-tag
									:style="`color: ${segmentedIndex===key?'#fff':''};${segmentedIndex===key?`background: ${item.bg}`:''}`"
									v-for="(item,key) in segmentedList" :key="key" :checked="segmentedIndex===key"
									@change="tagChange(key)">{{item.text}}</el-check-tag>
							</div>
						</template>
					</el-input>
				</el-form-item>
			</el-col>
			<el-col v-show="segmentedIndex===1" :span="6" class="grid-cell">
				<el-form-item label="账单周期" prop="settlement_method">
					<el-input v-model="state.formData.settlement_method" type="text" clearable>
					</el-input>
				</el-form-item>
			</el-col>
			<el-col v-show="segmentedIndex===1" :span="6" class="grid-cell">
				<el-form-item label="上次结账日" prop="settlement_method">
					      <el-date-picker style="width: 100%;"
					        v-model="state.formData.settlement_method"
					        type="date"
					      />
				</el-form-item>
			</el-col>
			<el-col v-show="segmentedIndex===1" :span="6" class="grid-cell">
				<el-form-item label="下次对账日" prop="settlement_method">
					<el-input v-model="state.formData.settlement_method" disabled type="text" clearable>
					</el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<div class="static-content-item">
			<div>账款信息</div>
		</div>
		<el-row :gutter="20">
			<el-col :span="6" class="grid-cell">
				<el-form-item label="采购总额" prop="total_purchase_amount">
					<el-input v-model="state.formData.total_purchase_amount" :disabled="true" type="text" clearable>
					</el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6" class="grid-cell">
				<el-form-item label="应付总额" prop="total_payable_amount">
					<el-input v-model="state.formData.total_payable_amount" :disabled="true" type="text"
						clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6" class="grid-cell">
				<el-form-item label="已对账总额" prop="total_reconciled_amount">
					<el-input v-model="state.formData.total_reconciled_amount" :disabled="true" type="text" clearable>
					</el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6" class="grid-cell">
				<el-form-item label="待对账总额" prop="total_unreconciled_amount">
					<el-input v-model="state.formData.total_unreconciled_amount" :disabled="true" type="text" clearable>
					</el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="8" class="grid-cell">
				<el-form-item label="延期率" prop="delay_rate">
					<el-input v-model="state.formData.delay_rate" :disabled="true" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="8" class="grid-cell">
				<el-form-item label="待付款金额" prop="unpaid_amount">
					<el-input v-model="state.formData.unpaid_amount" :disabled="true" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="8" class="grid-cell">
				<el-form-item label="已付款金额" prop="paid_amount">
					<el-input v-model="state.formData.paid_amount" :disabled="true" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12" class="grid-cell">
				<el-form-item label="待回票金额" prop="unpaid_invoice_amount">
					<el-input v-model="state.formData.unpaid_invoice_amount" :disabled="true" type="text" clearable>
					</el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12" class="grid-cell">
				<el-form-item label="已回票金额" prop="paid_invoice_amount">
					<el-input v-model="state.formData.paid_invoice_amount" :disabled="true" type="text"
						clearable></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<div class="static-content-item">
			<div>供应商信息</div>
		</div>
		<el-form-item label="资质证书" prop="qualification_certificate">
			<!--      <el-input v-model="formData.qualification_certificate" type="text" clearable></el-input>-->
			<div style="width: 100%;
       border: 1px solid var(--el-border-color-hover);
       border-radius: 5px;
       padding: 0px 10px 0px 10px;
       ">
				<el-button :icon="UploadFilled" round style="border: 0" size="small">
					文件上传
				</el-button>
			</div>
		</el-form-item>
		<el-row :gutter="20">
			<el-col :span="12" class="grid-cell">
				<el-form-item label="公司全称" prop="company_full_name">
					<el-input v-model="state.formData.company_full_name" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12" class="grid-cell">
				<el-form-item label="税号" prop="tax_id">
					<el-input v-model="state.formData.tax_id" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12" class="grid-cell">
				<el-form-item label="银行账号" prop="bank_account">
					<el-input v-model="state.formData.bank_account" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12" class="grid-cell">
				<el-form-item label="开户行" prop="bank_name">
					<el-input v-model="state.formData.bank_name" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-form-item label="详细地址" prop="address">
			<el-input v-model="state.formData.address" type="text" clearable></el-input>
		</el-form-item>
	</el-form>

</template>
<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { UploadFilled } from "@element-plus/icons-vue";
	import { useSelect } from '../../utils/mixins';
	//
	const { selectChanges,selectClear } = useSelect();
	//
	const state = reactive({
		formData: {
			supplier_level: "",
			cooperation_status: "",
			supplier_short_name: "",
			contact_person: "",
			phone_number: "",
			settlement_method: "",
			total_purchase_amount: "保存后显示计算结果",
			total_payable_amount: "保存后显示计算结果",
			total_reconciled_amount: "保存后显示计算结果",
			total_unreconciled_amount: "保存后显示计算结果",
			delay_rate: "保存后显示计算结果",
			unpaid_amount: "保存后显示计算结果",
			paid_amount: "保存后显示计算结果",
			unpaid_invoice_amount: "保存后显示计算结果",
			paid_invoice_amount: "保存后显示计算结果",
			qualification_certificate: "",
			company_full_name: "",
			tax_id: "",
			bank_account: "",
			bank_name: "",
			address: "",
		},
		rules: {
			cooperation_status: [{
				required: true,
				message: '字段值不可为空',
			}],
			supplier_short_name: [{
				required: true,
				message: '字段值不可为空',
			}],
		},
		supplier_levelOptions: [{
			label: "一级供应商",
			color: '#9161f2',
			value: 1
		}, {
			label: "二级供应商",
			color: '#3d97f2',
			value: 2
		}, {
			label: "三级供应商",
			color: '#86a3bf',
			value: 3
		},],
		cooperation_statusOptions: [{
			label: "合作中",
			color: '#3d97f2',
			value: 1
		}, {
			label: "已淘汰",
			color: '#86a3bf',
			value: 2
		}],
	});
	//
	const segmentedIndex = ref(-1);
	const segmentedList = ref([{
		text: '按单付款-现结',
		bg: '#2fba2f',
		value: 1
	}, {
		text: '按入库对账-赊账',
		bg: '#3d97f2',
		value: 2
	}]);
	//
	const tagChange = (index : number) => {
		if (segmentedIndex.value === index) {
			segmentedIndex.value = -1;
			return;
		}
		segmentedIndex.value = index;
	}
	const supplier_level = ref(null);
	const cooperation_status = ref(null);
	//改变
	const selectChange = (value : Array<any>, type : string) => {
		//
		selectChanges(state,value,type,[supplier_level,cooperation_status]);
	}
</script>

<style lang="scss">
	@import '../../assets/css/my-form-item.css';
</style>

<style lang="scss" scoped>
	div.table-container {
		table.table-layout {
			width: 100%;
			table-layout: fixed;
			border-collapse: collapse;

			td.table-cell {
				display: table-cell;
				height: 36px;
				border: 1px solid #e1e2e3;
			}
		}
	}

	div.tab-container {}

	.label-left-align :deep(.el-form-item__label) {
		text-align: left;
	}

	.label-center-align :deep(.el-form-item__label) {
		text-align: center;
	}

	.label-right-align :deep(.el-form-item__label) {
		text-align: right;
	}

	.custom-label {}
</style>